<!--
 * @页面名称:首页访问趋势图表
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="modules accessTrends">
    <a-card>
      <template #title>
        <span>{{ itemConfig.MS_ModuleName }}</span>
        <router-link :to="{ path: itemConfig.MS_View }">
          <el-link type="primary">更多</el-link>
        </router-link>
      </template>
      <div ref="echartsRef" class="content-box"></div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ECOption } from "@/components/Echarts/config";
import ECharts from "@/components/Echarts/index.vue";
import * as echarts from "echarts";
import { useEcharts } from "@/hooks/useEcharts";
import useCurrentInstance from "@/utils/useCurrentInstance";

const props = defineProps({
  itemConfig: {
    type: Object,
    default: () => {}
  }
});
const { proxy } = useCurrentInstance();
// 图表实例
const echartsRef = ref<HTMLElement>();
// 数据集合
const dataList = ref([]);
// 初始化图表
const initChart = (data: any) => {
  const myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
  const option: ECOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: data.map((v: any) => {
        return `${v.Year}-${v.Month}`;
      }),
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: "value"
    },
    series: {
      name: "次数",
      type: "bar",
      barWidth: "60%",
      data: data.map((v: any) => v.Count)
    },
    dataZoom: {
      type: "inside",
      startValue: 1,
      endValue: 12
    }
  };
  useEcharts(myChart, option);
};
// 获取数据
const getData = () => {
  proxy.$vueAxios.get("DynamicStatistics/GetAccessTrend", { noLoading: true }).then((res: any) => {
    if (res.Mark) {
      initChart(res.List);
    }
  });
};
onMounted(() => {
  getData();
});
</script>

<style scoped lang="scss">
.accessTrends {
  height: 300px;
  :deep(.ant-card-body) {
    height: calc(100% - 56px);
  }
}
</style>
